<template>
  <div class="messages-page">
    <!-- 顶部导航栏 -->
    <el-header height="60px" class="header">
      <!-- 自定义返回按钮，用 div 实现箭头样式 -->
      <div 
        class="back-btn" 
        @click="handleBack"
      ></div>
      <!-- 消息标题 -->
      <span class="title">消息中心</span>
    </el-header>

    <!-- 消息列表主体 -->
    <el-main class="message-main">
      <!-- 标签页切换：私信 / 系统通知 -->
      <div class="tabs">
        <div 
          class="tab" 
          :class="{ active: tab === 'chat' }"
          @click="tab = 'chat'"
        >
          私信
        </div>
        <div 
          class="tab" 
          :class="{ active: tab === 'system' }"
          @click="tab = 'system'"
        >
          系统通知
        </div>
      </div>

      <!-- 私信列表 -->
      <div v-if="tab === 'chat'" class="message-list">
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in chatList"
            :key="index"
            :timestamp="formatTime(item.time)"
            placement="top"
          >
            <!-- 消息内容容器， flex 布局实现左侧头像、信息 + 右侧封面 -->
            <div class="message-item" @click="goChat(item)">
              <!-- 左侧：头像 + 昵称 + 内容 -->
              <div class="left-content">
                <el-avatar
                  :src="item.avatar || defaultAvatar"
                  class="avatar"
                ></el-avatar>
                <div class="info">
                  <span class="nickname">{{ item.nickname }}</span>
                  <p class="content">
                    {{ item.lastMessage }}
                  </p>
                </div>
              </div>

              <!-- 右侧：未读标记 -->
              <div v-if="item.unread" class="unread-mark"></div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>

      <!-- 系统通知列表 -->
      <div v-else class="system-notifications">
        <el-card
          v-for="(item, index) in systemList"
          :key="index"
          class="notification-item"
          :class="{ 'is-unread': !item.isRead }"
          @click="markSystemRead(item._id)"
        >
          <div class="content">
            <!-- 根据消息类型展示不同内容 -->
            <template v-if="item.type === 'like'">
              赞了你的作品：{{ item.content }}
            </template>
            <template v-else-if="item.type === 'comment'">
              评论了你的帖子：{{ item.content }}
            </template>
            <template v-else-if="item.type === 'follow'">
              {{ item.content }}
            </template>
            <template v-else>
              {{ item.content }}
            </template>
            <span class="sys-time">{{ formatTime(item.time) }}</span>
            <span v-if="!item.isRead" class="sys-unread-dot"></span>
          </div>
        </el-card>
      </div>
    </el-main>
  </div>
</template>

<script>
import { systemMessage } from '@/utils/api.js';

export default {
  name: "Message",
  data() {
    return {
      // 模拟消息列表数据，可根据实际接口返回调整结构
      messageList: [
        {
          type: "like", // 消息类型：点赞 like / 评论 comment / 关注 follow
          avatar: "/default-avatar.png", // 头像路径，用 public 下的默认头像
          nickname: "跳枪",
          time: "2024-03-15 12:00:00",
          content: "你的某条评论",
          cover: "https://picsum.photos/80?random=1", // 模拟封面图
        },
        {
          type: "comment",
          avatar: "/default-avatar.png",
          nickname: "小张睡嗷嗷",
          time: "2024-10-13 15:30:00",
          content: "@π 龘星 1 在评论中提到了你",
          cover: "https://picsum.photos/80?random=2",
        },
        {
          type: "follow",
          avatar: "/default-avatar.png",
          nickname: "呦吼",
          time: "2024-09-17 10:10:00",
          content: "关注了你",
          cover: "", // 关注类消息可不用封面
        },
        // 可继续扩展更多消息项...
      ],
      tab: 'chat',
      chatList: [],
      systemList: [],
      defaultAvatar: '/default-avatar.png',
    };
  },
  methods: {
    // 返回按钮逻辑，可根据实际路由调整
    handleBack() {
      this.$router.back();
    },
    // 格式化时间，简单示例，可按需用 dayjs 等库优化
    formatTime(timeStr) {
      const date = new Date(timeStr);
      return (
        date.getMonth() +
        1 +
        "月" +
        date.getDate() +
        "日 " +
        date.getHours() +
        ":" +
        date.getMinutes()
      );
    },
    // 跳转到聊天页面
    goChat(msg) {
      this.$router.push(`/friends/${msg._id}`)
    },
    // 拉取私信和系统通知
    async fetchMessages() {
      // TODO: 替换为真实接口
      // this.chatList = await api.message.list()
      try {
        // 拉取系统通知
        const res = await systemMessage.list();
        this.systemList = (res.list || []).map(item => ({
          ...item,
          // 兼容旧结构
          time: item.createdAt,
        }));
      } catch (e) {
        this.systemList = [];
      }
      // 保持原有模拟私信
      this.chatList = [
        { _id: '1', nickname: '小明', avatar: '', lastMessage: '你好', unread: true },
        { _id: '2', nickname: '小红', avatar: '', lastMessage: '收到，谢谢', unread: false }
      ];
    },
    // 标记系统通知为已读
    async markSystemRead(id) {
      await systemMessage.markRead(id);
      this.fetchMessages();
    },
  },
  mounted() {
    this.fetchMessages();
  }
};
</script>

<style scoped>
.message-page {
  height: 100vh;
  background-color: #f5f7fa;
}

.header {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
  padding: 0 20px;
}

/* 自定义返回按钮样式，绘制箭头 */
.back-btn {
  width: 24px;
  height: 24px;
  border-left: 2px solid #606266;
  border-bottom: 2px solid #606266;
  transform: rotate(45deg); /* 旋转让边框组合成箭头形状 */
  cursor: pointer;
  transition: all 0.3s ease;
}
.back-btn:hover {
  border-color: #409eff; /* hover 时改变箭头颜色 */
}

.title {
  font-size: 30px;
  font-weight: bold;
  color: #303133;
  margin-left: 10px;
}

.message-main {
  padding: 20px;
}

.tabs {
  display: flex;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: 16px;
  color: #606266;
  cursor: pointer;
  transition: color 0.3s ease;
}
.tab.active {
  color: #409eff;
  font-weight: 500;
}

.message-item {
  display: flex;
  align-items: flex-start;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  transition: box-shadow 0.3s ease;
}
.message-item:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); /* 鼠标悬浮时轻微阴影 */
}

.left-content {
  display: flex;
  align-items: center;
  flex: 1;
}

.avatar {
  width: 48px;
  height: 48px;
  margin-right: 12px;
}

.info {
  display: flex;
  flex-direction: column;
}

.nickname {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 6px;
}

.content {
  font-size: 13px;
  color: #606266;
  margin: 0;
  line-height: 1.4;
}

.right-cover {
  width: 80px;
  height: 80px;
  margin-left: 15px;
}

.cover-img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.unread-mark {
  width: 8px;
  height: 8px;
  background-color: #f56c6c;
  border-radius: 50%;
  position: absolute;
  top: 15px;
  right: 15px;
}

.notification-item {
  margin-bottom: 10px;
}

.notification-item .content {
  font-size: 14px;
  color: #303133;
  padding: 10px;
}

.notification-item.is-unread {
  border-left: 4px solid #f56c6c;
  background: #fff7f7;
}

.sys-time {
  float: right;
  color: #bbb;
  font-size: 12px;
  margin-left: 10px;
}

.sys-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #f56c6c;
  border-radius: 50%;
  margin-left: 8px;
}
</style>